let mask = document.querySelector(".mask");
let big = document.querySelector(".big");
let small = document.querySelector(".small");
let img = document.querySelector(".big img");
let img1 = document.querySelector(".small  img");
let fun = function (e) {
  mask.style.top = `${
    e.pageY - mask.offsetHeight / 2 - $(".small").offset().top
  }px`;
  mask.style.left = `${
    e.pageX - mask.offsetWidth / 2 - $(".small").offset().left
  }px`;
  if (parseInt(mask.style.top) < 0) {
    mask.style.top = 0;
  }
  if (parseInt(mask.style.left) < 0) {
    mask.style.left = 0;
  }
  if (parseInt(mask.style.left) > small.clientWidth - mask.clientWidth) {
    // body自己宽度减盒子自己宽度就是不能超出的距离
    mask.style.left = `${small.clientWidth - mask.clientWidth}px`;
  }
  if (parseInt(mask.style.top) > small.clientHeight - mask.clientHeight) {
    mask.style.top = `${small.clientHeight - mask.clientHeight}px`;
  }

  let maskMax = small.offsetWidth - mask.offsetWidth;
  let bingImgMax = img.offsetWidth - big.offsetWidth;

  // 计算得出大图片移动距离

  let bigImgX = parseInt(mask.style.left) * (bingImgMax / maskMax);
  let bigImgY = parseInt(mask.style.top) * (bingImgMax / maskMax);
  img.style.left = -bigImgX + "px";
  img.style.top = -bigImgY + "px";
};
img1.addEventListener(
  "mouseenter",
  function (e) {
    e.stopPropagation();
    console.log(1);
    mask.style.display = "block";
    big.style.display = "block";
    img1.onmousemove = fun;
  },
  false
);
img1.addEventListener(
  "mouseleave",
  function (e) {
    mask.style.display = "none";
    big.style.display = "none";
    img1.onmousemove = null;
  },
  false
);
